<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专治选择困难</title>
    <style>
        #addBtn{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <span>几个主菜？</span>
            <select name="" id="main">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div>
            <span>几个小菜？</span>
            <select name="" id="vege">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div>
            <span>要不要汤？</span>
            <input type="radio"  name="isSoup" value="1" /> 要
            <input type="radio"  name="isSoup" value="0" /> 不要
        </div>
        <button id="doIt">生成</button>
    </div>
    <div id="addBtn">
        <a href="./menu.html" >编辑菜谱</a>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let cai = JSON.parse(localStorage.getItem('menu'));
        if(cai){
            
        }else{
            localStorage.setItem('menu', JSON.stringify({
    "main":[
        {"name":"红烧肉"},
        {"name":"烂肉豇豆"},
        {"name":"尖椒肉丝"},
        {"name":"黄焖鸡"},
        {"name":"可乐鸡翅"},
        {"name":"糖醋排骨"},
        {"name":"藕片炒肉"},
        {"name":"水煮肉片"},
        {"name":"咖喱饭"},
        {"name":"粉蒸肉"},
        {"name":"啤酒鸭"},
        {"name":"清蒸鱼"},
        {"name":"腊肉"},
        {"name":"蒜苗回锅"},
        {"name":"尖椒回锅"},
        {"name":"烂肉炖粉条"},
        {"name":"花甲"},
        {"name":"洋葱炒肉"},
        {"name":"杏鲍菇炒肉"},
        {"name":"芹菜肉丝"},
    ],
    "vegetables":[
        {"name":"麻婆豆腐"},
        {"name":"韭菜炒蛋"},
        {"name":"红烧茄子"},
        {"name":"西兰花"},
        {"name":"金针菇"},
        {"name":"土豆丝"},
        {"name":"蒜泥生菜"},
        {"name":"手撕包菜"},
        {"name":"黄瓜炒蛋"},
        {"name":"凉拌黄瓜"},
        {"name":"芹菜豆干"},
        {"name":"清炒小白菜"},
    ],
    "soup":[
        {"name":"鸡汤"},
        {"name":"排骨汤"},
        {"name":"番茄蛋汤"},
        {"name":"鱼汤"}
    ]
}))
        }
        
        $('#doIt').on('click',function(){
            let cai = JSON.parse(localStorage.getItem('menu'));

            let main = getMenu(cai.main,$('#main').val())
            let vege = getMenu(cai.vegetables,$('#vege').val())
            let soup = getMenu(cai.soup,$('input[name="isSoup"]:checked').val())
            console.log(main,vege,soup)
            let str = "主菜："
            main.forEach(e => {
                str += e.name + '、'
            })
            str += '\n 小菜：'
            vege.forEach(e => {
                str += e.name + '、'
            })
            if(soup.length != 0){
            str += `\n 汤：${soup[0].name}`
            }
            alert(str)
        })
        let getMenu = function (arr,number) {
            let newArr = []
            for(let i=arr.length+1;i>0;i--){
                let rdm = Math.floor(Math.random()*arr.length)
                if(!newArr.includes(arr[rdm])){
                    newArr.push(arr[rdm])
                }else{
                    if(newArr.length == arr.length){
                        break;
                    }
                    i++
                }
            }
            return newArr.slice(0,number)
        }
        
    </script>
</body>
</html>